<template>
	<view>
		<u-tabs :list="typeList" @click="changeType" :current="currentIndex" :scrollable="false"></u-tabs>
		<view v-if="currentIndex==0 || currentIndex==2">
			<view class="wq-table">
				<view class="thead">基本信息</view>
				<view class="tbody">
					<view class="row">
						<view class="th">客户名称</view>
						<view class="td">{{info.customName}}</view>
					</view>
					<view class="row">
						<view class="th">车间名称</view>
						<view class="td">{{info.chejian}}</view>
					</view>
					<view class="row">
						<view class="th">送修姓名</view>
						<view class="td">{{info.personName}}</view>
					</view>
					<view class="row">
						<view class="th">联系方式</view>
						<view class="td" @tap="call(info.phone)">{{info.phone}}</view>
					</view>

				</view>
			</view>

			<view class="wq-table">
				<view class="thead">产品信息</view>
				<view class="tbody">
					<view class="row">
						<view class="th">产品编码</view>
						<view class="td">{{info.skuNo}}</view>
					</view>
					<view class="row">
						<view class="th">kks编码</view>
						<view class="td">{{info.kksno}}</view>
					</view>
					<view class="row">
						<view class="th">产品名称</view>
						<view class="td">{{info.name}}</view>
					</view>
					<view class="row">
						<view class="th">产品数量</view>
						<view class="td">{{info.num}}</view>
					</view>
					<view class="row">
						<view class="th">产品型号</view>
						<view class="td">{{info.cpxh}}</view>
					</view>
					<!-- <view class="row">
							<view class="th">产品规格</view>
							<view class="td">{{info.cpgg}}</view>
						</view> -->
					<view class="row">
						<view class="th">生产厂家</view>
						<view class="td">{{info.sccj}}</view>
					</view>
					<view class="row">
						<view class="th">维修次数</view>
						<view class="td">{{info.wxcs}}</view>
					</view>
					<view class="row">
						<view class="th">产品口径</view>
						<view class="td">{{info.cpkj}}</view>
					</view>
					<view class="row">
						<view class="th">阀体材质</view>
						<view class="td">{{info.ftcz}}</view>
					</view>
					<view class="row">
						<view class="th">阀芯材质</view>
						<view class="td">{{info.fxcz}}</view>
					</view>
					<view class="row">
						<view class="th">阀杆材质</view>
						<view class="td">{{info.fgcz}}</view>
					</view>
				</view>
			</view>
			<view class="wq-table">
				<view class="thead">维修描述</view>
				<view class="tbody">
					<view class="row">
						<view class="th">维修描述</view>
						<view class="td">{{info.describ}}</view>
					</view>
					<view class="row">
						<view class="th">图片描述</view>
						<view class="td flex-container">
							<image class="mImg" mode="aspectFill" :src="cdnUrl+item"
								@tap="previewImg(info.picArr,index)" v-for="(item,index) in info.picArr" :key="index">
							</image>
						</view>
					</view>
					<view class="row">
						<view class="th ">视频描述</view>
						<view class="td flex-container"><video class="mVideo" :src="cdnUrl+item" v-for="(item,index) in info.videoArr"
								:key="index"></video></view>
					</view>



				</view>
			</view>
		</view>

		<view class="steps" v-if="currentIndex==1 || currentIndex==2">
			<view class="stepsItem">
				<view class="title">进厂</view>
				<view class="time">{{info.createdAt}}</view>
			</view>
			<view class="stepsItem" v-if="info.status>=1">
				<view class="title">拆修</view>
				<view class="time">{{info.chaiAt}}</view>
				<view class="itemList">
					<view class="ilItem" v-for="(item,index) in info.chaiArr" :key="index">
						<view class="illItem">
							<view class="label">维修项目：</view>
							<view class="listTitle">
								{{item.title}}
							</view>
						</view>
						<view class="illItem" v-if="item.picLength>0">
							<view class="label">图片描述：</view>
							<view class="picList">

								<image mode="aspectFill" @tap="previewImg(item.picList,idx)" :src="cdnUrl+it"
									v-for="(it,idx) in item.picList" :key="idx"></image>
							</view>
						</view>
						<view class="illItem" v-if="item.videoLength>0">
							<view class="label">视频描述：</view>
							<view class="videoList">

								<video mode="aspectFill" :src="cdnUrl+it" v-for="(it,idx) in item.videoList"
									:key="idx"></video>
							</view>
						</view>
						<view class="illItem" v-if="item.price!==''">
							<view class="label">维修价格：</view>
							<view class="price">
								￥{{item.price}}
							</view>
						</view>
						<view class="illItem">
							<view class="label">拆修描述：</view>
							<view class="listDescription">{{item.text}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="stepsItem" v-if="info.status>=2">
				<view class="title">客户已确认维修</view>
				<view class="time">{{info.chaiTrueAt}}</view>
				<view class="illlItem">
					<view class="label">客户签字：</view>
					<view class="listTitle">
						<image :src="cdnUrl+info.trueXiu" mode="aspectFill" @tap="previewImg([info.trueXiu],0)"></image>
					</view>
				</view>
			</view>
			<view class="stepsItem" v-if="info.status>=3">
				<view class="title">维修</view>
				<view class="time">{{info.xiuAt}}</view>
				<view class="itemList">
					<view class="ilItem" v-for="(item,index) in info.xiuArr" :key="index">
						<view class="illItem">
							<view class="label">维修项目：</view>
							<view class="listTitle">
								{{item.title}}
							</view>
						</view>
						<view class="illItem" v-if="item.picLength>0">
							<view class="label">图片描述：</view>
							<view class="picList">

								<image mode="aspectFill" @tap="previewImg(item.picList,idx)" :src="cdnUrl+it"
									v-for="(it,idx) in item.picList" :key="idx"></image>
							</view>
						</view>
						<view class="illItem" v-if="item.videoLength>0">
							<view class="label">视频描述：</view>
							<view class="videoList">

								<video mode="aspectFill" :src="cdnUrl+it" v-for="(it,idx) in item.videoList"
									:key="idx"></video>
							</view>
						</view>

						<view class="illItem">
							<view class="label">维修描述：</view>
							<view class="listDescription">{{item.text}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="stepsItem" v-if="info.status>=4">
				<view class="title">试压</view>
				<view class="time">{{info.shiyaAt}}</view>
				<view class="illlItem">
					<view class="label">试压工姓名：</view>
					<view class="listTitle">
						{{info.shiyaArr.name}}
					</view>
				</view>
				<view class="illlItem">
					<view class="label">试压压力：</view>
					<view class="listTitle">
						{{info.shiyaArr.yali}}
					</view>
				</view>
				<view class="illlItem">
					<view class="label">试压时长（秒）：</view>
					<view class="listTitle">
						{{info.shiyaArr.shiyaLong}}
					</view>
				</view>
				<view class="illlItem">
					<view class="label">试压照片：</view>
					<view class="listTitle">
						<view class="picList">
							<image mode="aspectFill" :src="cdnUrl+it" @tap="previewImg([info.shiyaArr.shiyaPic],0)"
							v-for="(it,idx) in info.shiyaArr.shiyaPic" :key="idx">
							</image>
						</view>
						
					</view>
				</view>
				<view class="illlItem">
					<view class="label">试压视频：</view>
					<view class="listTitle">
						<view class="picList">
						<video  mode="aspectFill" :src="cdnUrl+it" v-for="(it,idx) in info.shiyaArr.shiyaVideo"
							:key="idx"></video>
						</view>
						
					</view>
				</view>
				
				
			
			
		</view>

		<view class="stepsItem" v-if="info.status>=6">
			<view class="title">入合格品库</view>
			<view class="illlItem">
				<view class="label">喷漆照片：</view>
				<view class="listTitle">
					<view class="picList">
					<image :src="cdnUrl+it" mode="aspectFill"
						@tap="previewImg([info.penqiArr.penqiPic],0)" v-for="(it,idx) in info.penqiArr.penqiPic"
							:key="idx"></image>
					</view>
				</view>
			</view>
			<view class="time">{{info.penqiAt}}</view>
		</view>
		<view class="stepsItem" v-if="info.status>=7">
			<view class="title">出库</view>
			<view class="time">{{info.chukuAt}}</view>
		</view>
		<view class="stepsItem" v-if="info.status==8">
			<view class="title">客户已确认收货</view>
			<view class="time">{{info.shouTrueAt}}</view>
			<view class="illlItem">
				<view class="label">客户签字：</view>
				<view class="listTitle">
					<image :src="cdnUrl+info.trueShou" mode="aspectFill" @tap="previewImg([info.trueShou],0)"></image>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	import helper from '../../common/helper';
	import listItem from '../../uni_modules/uview-plus/components/u-list-item/listItem';
	import api from '@/api.js'
	export default {
		mixins: [helper],
		data() {
			return {
				isVideoShow: false,
				id: 0,
				info: {

				},
				typeList: [{
					name: "基础信息"
				}, {
					name: "维修过程"
				},{
					name:"全部"
					
				}],
				currentIndex: 0,

			}
		},
		onLoad(e) {
			var that = this;
			setTimeout(function() {
				that.isVideoShow = true;
			}, 3000)
			this.id = e.id;
			api.doRequest('get', 'valve/detail', {
				id: this.id
			}).then(res => {
				if (res.statusCode == 200) {
					let ret = res.data.data;
					console.log(ret);
					this.info = ret;
					if (this.info.picJson) {
						this.info.picArr = JSON.parse(this.info.picJson);
					} else {
						this.info.picArr = [];
					}
					if (this.info.videoJson) {
						this.info.videoArr = JSON.parse(this.info.videoJson);
					} else {
						this.info.videoArr = [];
					}
					if (this.info.chaiJson) {
						this.info.chaiArr = JSON.parse(this.info.chaiJson);
					} else {
						this.info.chaiArr = [];
					}
					if (this.info.xiuJson) {
						this.info.xiuArr = JSON.parse(this.info.xiuJson);
					} else {
						this.info.xiuArr = [];
					}
					if (this.info.shiyaJson) {
						this.info.shiyaArr = JSON.parse(this.info.shiyaJson);
					} else {
						this.info.shiyaArr = {};
					}
					if (this.info.penqiJson) {
						this.info.penqiArr = JSON.parse(this.info.penqiJson);
					} else {
						this.info.penqiArr = {};
					}
				}
			})
		},
		methods: {
			changeType(e) {
				this.currentIndex = e.index;
			},
			previewImg(list, index) {
				let newList = [];
				list.forEach((item, index) => {
					newList.push(this.cdnUrl + item);
				})

				uni.previewImage({
					urls: newList,
					current: index
				})
			}
		}
	}
</script>

<style>
	.wq-table {
		width: calc(100% - 40upx);
		margin: 10upx auto;
		border-collapse: collapse;
		text-align: center;
		border-radius: 20upx;
		overflow: hidden;
		border-right: 1upx solid #ccc
	}

	.thead {
		background: #004ea2;
		color: #fff;
		height: 60upx;
		border-bottom: 1upx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	.tbody .row {
		width: 100%;
		display: flex;
		border-bottom: 1upx solid #ccc;
	}

	.wq-table .td,
	.wq-table .th {
		min-height: 60upx;
		display: flex;
		align-items: center;
		justify-content: left;
		text-indent: 2em;
		line-height: 60upx;
	}
.flex-container{
	display: flex;
	flex-wrap: wrap;
}
	.wq-table .th {
		width: 200upx !important;
		background: #004ea2;
		color: #fff;
	}

	.wq-table .td {
		width: 520upx;
	}

	.wq-table .td image {
		width: 150upx;
		height: 150upx;
		margin: 10upx;
		border-radius: 10upx;
	}

	.wq-table .td video {
		width: 320upx;
		height: 180upx;
		margin: 10upx;
		border-radius: 10upx;
	}

	.wq-table .tbody {
		font-size: 12px;
	}

	.stepsItem {
		width: 670upx;
		height: auto;
		background: #eee;
		margin: 20upx auto;
		border-radius: 20upx;
		padding: 20upx;
	}

	.stepsItem .title {
		color: #004ea2;
		font-weight: 600;
	}

	.stepsItem .time {
		color: #666;
		font-size: 12px;
	}

	.stepsItem .ilItem {
		width: 630upx;
		background: #fff;
		padding: 20upx;
		margin: 20upx auto;
		border-radius: 20upx;
	}

	.stepsItem .ilItem .listTitle {}

	.picList {
		display: flex;
		flex-wrap: wrap;
	}

	.picList image {
		width: 200upx;
		height: 200upx;
		margin:10upx;
		border-radius:10upx;
	}
	.picList video{
		width:200upx;
		height:200upx;
	}
	.illItem {
		width: 630upx;
		display: flex;
		flex-direction: column;
	}

	.illItem .label {
		font-weight: 600;
		line-height: 60upx;
	}

	.illlItem {
		width: 670upx;
		display: flex;
		flex-direction: column;
	}

	.illlItem .label {
		font-weight: 600;
		line-height: 60upx;
	}

	.illlItem image {
		width: 320upx;
		height: 180upx;
	}

	.illItem .price {
		color: #f00;
	}

	.mImg {
		width: 320upx;
		height: 180upx;
	}

	.mVideo {
		width: 320upx;
		height: 180upx;
	}
</style>